<template>
	<div>
		<div class="chap_header" v-for="(item) of booksInfo" >
			<div class="left_img">
				<img class="left_img" :src="item.img_url" alt="">
			</div>
			<div class="right_jieshao">
				<div>{{item.title}}</div>
				<div>{{item.author}}</div>
				<div>{{item.des}}</div>
			</div>
		</div>
		<div class="content-chap" v-for="(item, index) of chapterInfo" :key='index'>
			<router-link :to="{path:'/chaptercontent',query:{id:item.id}}"><div class="chpater border">{{item.chapter}}</div></router-link>
		</div>
	</div>
</template>

<script>
import axios from 'axios'

export default {
	name:'HotChapter',
	data(){
		return{
			booksInfo:[],
			chapterInfo:[]
		}
	},
	methods:{
		getHotBooksInfo(){
			var title = this.$route.query.title;
			axios.post(('http://localhost:3000/api/user/mingzhubooksinfo'),{
				title:title
			},{}).then((response)=>{
				// console.log(response.data)
				var d = []
				for(var i = 0;i < response.data.length;i++){
					var dat = JSON.stringify(response.data[i])
					var dat2 = JSON.parse(dat)
					d.push(dat2)
				}
				var c = this.booksInfo = d
				// console.log(c)
			})
		},
		getMingZhuChaptersInfo(){
			var title = this.$route.query.title;
			axios.post(('http://localhost:3000/api/user/mingzhuchaptersinfo'),{
				bookname:title
			},{}).then((response)=>{
				// console.log(response.data)
				var d = []
				for(var i = 0;i < response.data.length;i++){
					var dat = JSON.stringify(response.data[i])
					var dat2 = JSON.parse(dat)
					d.push(dat2)
				}
				this.chapterInfo = d
			})
		}
	},
	mounted(){
		this.getHotBooksInfo();
		this.getMingZhuChaptersInfo();
	}
}
</script>

<style scoped>
	.chap_header{
		padding: 20px 50px 0 50px;
		width: 100%;
		height: 180px;
	}
	.left_img{
	  height: 115px;
	  width: 100px;
	  float: left;
	}
	.right_jieshao{
	  height: 100px;
	  width: 85%;
	  float: left;
	  padding-left: 36px;
	}
	.right_jieshao :first-child{
	  font-size: 20px;
	  font-weight: 800;
	}
	.right_jieshao :nth-child(2){
		position: absolute;
		top:28px;
		left:400px;
	}
	.right_jieshao :last-child{
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 1px;
		line-height: 24px;
		padding: 10px;
		/* 多行限制字数  显示省略号 */
		overflow: hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:6;
	}
	.content-chap{
		width: 100%;
		padding-left: 10%;
	}
	.chpater{
		width: 500px;
		background: f5eeee;
		float: left;
		height: 30px;
		line-height: 30px;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		color: #000000;
	}
	.chpater:hover{
		cursor: pointer;
		background: #A9A9A9;
	}
</style>

